<template>
  <div class="app-container answer">
    <el-form :model="queryParam" ref="queryForm" :inline="true"  style="text-align: center;">
      <el-row>
        <el-form-item label="部门：">
          <el-select v-model="queryParam.deptId" filterable placeholder="请选择（或输入）部门名称"  clearable>
            <el-option
              v-for="item in relaDeptList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :title="item.name">
              <span>{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工：">
          <el-select v-model="queryParam.userId" filterable placeholder="请选择（或输入）员工姓名" clearable>
            <el-option
              v-for="item in relaEmpList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :title="item.name">
              <span>{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始分数：">
          <el-input-number v-model="queryParam.beginScoreVM" :precision="0" :step="1" :min="0" :max="100"></el-input-number>
          <!-- <el-input v-model="queryParam.beginScoreVM" type="number"></el-input> -->
        </el-form-item>
        <el-form-item label="结束分数：">
          <el-input-number v-model="queryParam.endScoreVM" :precision="0" :step="1" :min="0" :max="100"></el-input-number>
          <!-- <el-input v-model="queryParam.endScoreVM" type="number"></el-input> -->
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="关联考试：" prop="examName">
          <el-select v-model="queryParam.examName" filterable placeholder="请选择（或输入）考试标题" clearable>
            <el-option
              v-for="item in taskTitleList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
              :title="item.name">
              <span>{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联试卷名称：">
          <el-select v-model="queryParam.paperName" filterable placeholder="请选择（或输入）试卷名称" clearable>
            <el-option
              v-for="item in relaPaperList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
              :title="item.name">
              <span>{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-form-item>
        <el-button type="info" @click="resetForm">重置</el-button>
        <el-button type="primary" @click="submitForm">查询</el-button>
        <el-button type="success" @click="downloadExcel">下载</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="answerId" label="答卷编号"   width="60" />
      <el-table-column prop="examName" label="考试名称"/>
      <el-table-column prop="examType" label="考试类型"  width="100px">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.examType == 1">固定考试</el-tag>
          <el-tag type="success" v-if="scope.row.examType == 4">时段考试</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="repetition" label="是否允许重复考试"  width="90">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.repetition == true">是</el-tag>
          <el-tag type="danger"  v-if="scope.row.repetition == false">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="credit" label="学分" width="70" />
      <el-table-column prop="paperName" label="试卷名称"/>
      <el-table-column prop="userName" label="答题员工" width="100"/>
      <el-table-column  label="得分" width="70" >
        <template slot-scope="{row}">
          {{row.userScore}} / {{row.paperScore}}
        </template>
      </el-table-column>
      <el-table-column  label="题目对错" width="70" >
        <template slot-scope="{row}">
          {{row.questionCorrect}} / {{row.questionCount}}
        </template>
      </el-table-column>
      <el-table-column prop="doTime" label="耗时" width="100px"/>
      <el-table-column prop="submitTime" label="提交时间" width="160px"/>
      <el-table-column  label="操作" align="center">
        <template slot-scope="{row}">
          <router-link target="_blank" :to="{path:'/answer/edit',query:{id: row.answerId}}" v-if="row.judgeStatus === 1 ">
            <el-button  type="warning" size="mini" style="margin-right: 4px">批改</el-button>
          </router-link>
          <router-link target="_blank" :to="{path:'/answer/read',query:{id: row.answerId}}" v-if="row.judgeStatus === 2 ">
            <el-button  type="success" size="mini" style="margin-right: 12px">查看试卷</el-button>
          </router-link>
          <el-popconfirm
            title="确定删除该记录吗？"
            @confirm="deleteAnswer(row)">
            <el-button size="mini" type="danger"  slot="reference" class="link-left">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize"
                @pagination="search"/>
  </div>
</template>

<script>

import { mapGetters, mapState, mapActions } from 'vuex'
import Pagination from '@/components/Pagination'
import examPaperAnswerApi from '@/api/examPaperAnwser'
import taskApi from '@/api/task'
import paperApi from '@/api/examPaper'
import deptApi from '@/api/dept'
import userApi from '@/api/user'

export default {
  components: { Pagination },
  data () {
    return {
      visible: false,
      isJump: false,
      taskTitleList: [],
      relaPaperList: [],
      relaDeptList: [],
      relaEmpList: [],
      queryParam: {
        examId: undefined,
        examName: undefined,
        paperName: undefined,
        deptId: undefined,
        userId: undefined,
        beginScoreVM: undefined,
        endScoreVM: undefined,
        beginTime: undefined,
        endTime: undefined,
        done: false,
        pageNum: 1,
        pageSize: 10
      },
      listLoading: false,
      tableData: [],
      total: 0
    }
  },
  created () {
    
    let exId = this.$route.query.examId
    if (this.$route.query.jump) {
      if (exId != null &&
      exId != undefined && 
      exId!= '') {
        this.$set(this.queryParam, 'examId', parseInt(exId))
      }
    }
    this.loadAll()
    // this.initSubject()
    this.search()
  },
  methods: {
    deleteAnswer (row) {
      this.visible = false
      let _this = this
      examPaperAnswerApi.deleteAnswer({ id: row.answerId }).then(re => {
        if (re.code === 1) {
          _this.search()
          _this.$message.success(re.message)
        } else {
          _this.$message.error(re.message)
        }
      })
    },
    loadAll() {
      taskApi.titleFilter().then(res => {
        this.taskTitleList = res.response
      })
      
      paperApi.paperNmFilter().then(res => {
        this.relaPaperList = res.response
      })
      
      deptApi.deptFilter().then(res => {
        this.relaDeptList = res.response
      })
      
      userApi.userFilter().then(res => {
        this.relaEmpList = res.response
      })
    },
    resetForm() {
      this.queryParam = {
        examId: undefined,
        examName: undefined,
        paperName: undefined,
        deptId: undefined,
        userId: undefined,
        beginScoreVM: undefined,
        endScoreVM: undefined,
        beginTime: undefined,
        endTime: undefined,
        done: false,
        pageNum: 1,
        pageSize: 10
      }
      this.search()
    },
    search () {
      this.listLoading = true
      console.log(this.queryParam)
      examPaperAnswerApi.page(this.queryParam).then(data => {
        const re = data.response
        this.tableData = re.list
        this.total = re.total
        this.queryParam.pageNum = re.pageNum
        this.listLoading = false
      })
    },
    submitForm () {
      this.queryParam.pageNum = 1
      this.search()
    },
    downloadExcel () {
      const params = {
        examId: this.queryParam.examId,
        examName: this.queryParam.examName,
        paperName: this.queryParam.paperName,
        deptId: this.queryParam.deptId,
        userId: this.queryParam.userId,
        beginScoreVM: this.queryParam.beginScoreVM,
        endScoreVM: this.queryParam.endScoreVM,
        beginTime: this.queryParam.beginTime,
        endTime: this.queryParam.endTime,
        done: false,
        pageNum: this.queryParam.pageNum,
        pageSize: this.queryParam.pageSize,
        type: 1
      }
      
      examPaperAnswerApi.downloadExl(params).then(() => {
        // 
      })
    },
    ...mapActions('exam', { initSubject: 'initSubject' })
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapGetters('exam', ['subjectEnumFormat']),
    ...mapState('exam', { subjects: state => state.subjects })
  }
}
</script>

<style rel="stylesheet/scss" lang='scss'>
.answer .el-form-item--medium .el-form-item__label {
  line-height: 36px;
  margin-left: 15px;
}


.answer .el-form-item__error {
  color: #ff4949;
  font-size: 12px;
  line-height: 1;
  padding-top: 0px;
  position: absolute;
  top: 100%;
  left: 0;
}

.answer .el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: bold;
  text-align: center;
}

.answer .cell .el-tag {
  margin-right: 0px;
  width: 88%;
  text-align: center;
}

.answer .el-table .cell {
  text-align: center;
}

.answer .el-row {
  height: 50px;
  transform: scale(0.86);
  width: 111%;
  text-align: center;
  left: -71px;
}

.el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: bold;
  text-align: center;
}

</style>
